Skip to content

Latest Comments: Fix uneven padding issue causing mis-alignment#77379

Merged
t-hamano merged 3 commits intoWordPress:trunkfrom
dpmehta:fix/latest-comments-uneven-padding
Apr 16, 2026
Merged

Latest Comments: Fix uneven padding issue causing mis-alignment#77379
t-hamano merged 3 commits intoWordPress:trunkfrom
dpmehta:fix/latest-comments-uneven-padding

Conversation

@dpmehta
Copy link
Copy Markdown
Contributor

@dpmehta dpmehta commented Apr 15, 2026 •
edited
Loading

What?

Closes #66043

This PR resets the padding for Latest Comments blocks because only left padding is added via user-agent-stylesheet which looks uneven and creates visually uneven layout compared to other blocks.

Why?

Due to only one side padding for Latest Comments block added via user-agent-stylesheet, it looks visually mis-aligned. While Latest Comments block is technically list block but we don't need bullet points etc so extra left indentation seems unnecessary and creates uneven layout

How?

This PR updates the Latest Comments block to reset the padding for Latest Comments block. The key point here is reset for padding is added using :where() which has zero specificity, so it only overrides the user agent stylesheet's padding and Any global styles, theme.json overrides, or inspector padding controls will naturally take precedence without needing !important or higher specificity selectors and can be overridden easily.

Testing Instructions

  1. Open any demo or testing Post.
  2. Add Latest Comments block.
  3. Verify no uneven padding is added.
  4. Try to give padding via theme.json and Inspector Styling.
  5. Verify those styles are overridden and applied correctly.

Screenshots or screencast

Before Fix

Before fix

After Fix

After Fix

Use of AI Tools

N/A

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Apr 15, 2026
@dpmehta dpmehta marked this pull request as ready for review April 15, 2026 14:38
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dpmehta <mehtadev@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: rinkalpagdar <rinkalpagdar@git.wordpress.org>
Co-authored-by: viralsampat-multidots <mdviralsampat@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Latest Comments Affects the Latest Comments Block labels Apr 16, 2026
t-hamano
t-hamano reviewed Apr 16, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR! The approach looks good, but I'd suggest two additional improvements:

  • Could we use padding-left instead of padding to minimize the effect on themes?
  • We should be able to delete this style.This style was necessary when the block had nested divs, but it is no longer needed.

@dpmehta
Copy link
Copy Markdown
Contributor Author

dpmehta commented Apr 16, 2026

Thanks @t-hamano for review and improvements i have replaced padding: 0 with padding-left.

We should be able to delete this style.This style was necessary when the block had nested divs, but it is no longer needed.

what about above comment , are u saying to remove those styling , should i remove those styling as it is menioned it is not required now.

@t-hamano
Copy link
Copy Markdown
Contributor

t-hamano commented Apr 16, 2026

re u saying to remove those styling , should i remove those styling as it is menioned it is not required now.

Yes, that's right 👍

t-hamano
t-hamano approved these changes Apr 16, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@dpmehta
Copy link
Copy Markdown
Contributor Author

dpmehta commented Apr 16, 2026

@t-hamano Thanks for the quick reply ! it is showing merging is blocked for me though changes are approved, could you please help me with that how can i merge or could you please merge this PR 🙌.

@t-hamano
Copy link
Copy Markdown
Contributor

t-hamano commented Apr 16, 2026

@dpmehta, I will merge this PR once all CI checks pass.

@dpmehta
Copy link
Copy Markdown
Contributor Author

dpmehta commented Apr 16, 2026

Thank you so much ! 🙌

@t-hamano t-hamano merged commit a414470 into WordPress:trunk Apr 16, 2026
40 checks passed
@github-actions github-actions Bot added this to the Gutenberg 23.1 milestone Apr 16, 2026
ciampo pushed a commit that referenced this pull request Apr 16, 2026
@dpmehta @t-hamano @ciampo
Latest Comments: Fix uneven padding issue causing mis-alignment (#77379)
ae45ec9 
* fix : reset padding with lowest specificity to avoid mis alignment

* fix : improve padding reset by using padding-left

* fix : removed styles which is no longer needed now

Co-authored-by: dpmehta <mehtadev@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: rinkalpagdar <rinkalpagdar@git.wordpress.org>
Co-authored-by: viralsampat-multidots <mdviralsampat@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

No one assigned

Labels

[Block] Latest Comments Affects the Latest Comments Block [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 23.1

Development

Successfully merging this pull request may close these issues.

Latest comments block having padding/space issue when we changed its background color.

2 participants

@dpmehta @t-hamano